<template>
  <u-popup v-model="show" @close="close" @open="open" :mode="mode" length="60%" :mask="mask" :closeable="closeable"
    :close-icon-pos="closeIconPos">
    <view class="popup">
      <view class="popup-hd">
        <view class="popup-title">
          请选择用户<text class="primary">（已选 {{this.selectedData.length}}个）</text>
        </view>
        <view class="search-bar">
          <view class="search-input">
            <input type="text" v-model="keywords" placeholder="请输入用户名/工号" />
            <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
            <view class="search-button" @click="search">搜索</view>
          </view>
        </view>
      </view>
      <view class="popup-bd">
        <scroll-view :scroll-top="scrollRightTop" scroll-y="true" scroll-with-animation>
          <view class="user-list">
            <view v-for="(item, index) in data" :key="index" :id="'item' + index" class="user-item">
              <u-checkbox v-model="item.checked" :name="item.id" @change="userChange">
                {{item.name}}
                <view class="tag">{{item.deptName}}</view>
              </u-checkbox>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="popup-ft">
        <view class="button" @click="submit">确认</view>
        <view class="button danger" @click="clearAll">清空</view>
      </view>
    </view>
  </u-popup>
</template>
<script>
  export default {
    name: "JsPopup",
    props: {
      // 模式
      mode: {
        type: String,
        default: 'bottom'
      },
      // 是否显示遮罩
      mask: {
        type: Boolean,
        default: true
      },
      // 是否可以关闭
      closeable: {
        type: Boolean,
        default: false
      },
      closeIconPos: {
        type: String,
        default: 'top-right'
      },
      defaultVaule: {
        type: Array,
        default () {
          return [];
        }
      },
      action: {
        type: String,
        default: ''
      },
      multiple: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        scrollTop: 0, //tab标题的滚动条位置
        oldScrollTop: 0,
        current: 0, // 预设当前项的值
        menuHeight: 0, // 左边菜单的高度
        menuItemHeight: 0, // 左边菜单item的高度
        itemId: '', // 栏目右边scroll-view用于滚动的id
        data: [],
        menuItemPos: [],
        arr: [],
        scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
        timer: null, // 定时器
        tagShow: false,
        show: false,
        keywords: '',
        selectedData: [],
        allData: []
      }
    },
    onLoad() {

    },
    watch: {

    },
    created() {
      if (this.action != null && this.action != '') {
        this.$u.api.getUrlData(this.action, {}).then(res => {
          if (!res.data || res.data.length == 0) {
            return;
          }
          res.data.forEach((item) => {
            item.checked = false;
          })
          this.data = res.data;
          this.allData = res.data;
        });
      }
    },
    onReady() {

    },
    methods: {
      close() {
        this.show = false;
      },
      open() {
        this.show = true;
      },
      setDefaultVal(val) {
        this.data.forEach((item) => {
          item.checked = false;
        })
        val.forEach((item) => {
          this.data.forEach((userItem) => {
            if (item.id == userItem.id) {
              userItem.checked = true;
              return;
            }
          })
        })
        this.setSelectedData();
      },
      setSelectedData() {
        let selectData = [];
        this.allData.forEach((item) => {
          if (item.checked) {
            selectData.push(item);
          }
        })
        this.selectedData = selectData;
      },
      userChange(e) {
        if (!this.multiple) {
          this.data.forEach((item) => {
            item.checked = false;
          })
        }
        this.data.forEach((item) => {
          if (item.id == e.name) {
            item.checked = e.value;
          }
        })
        this.setSelectedData();
      },
      tagClick(row) {
        this.data.forEach((item) => {
          if (row.id == item.id) {
            item.checked = false;
          }
        })
        this.setSelectedData();
      },
      clearAll() {
        this.data.forEach((item) => {
          item.checked = false;
        })
        this.selectedData = [];
      },
      submit() {
        this.$emit('submit');
      },
      getData() {
        return this.selectedData;
      },
      search(value) {
        if (value != null && value !== '' && value != undefined) {
          this.data = this.data.filter(item => item.account.includes(value) || item.name.includes(value));
        } else {
          this.data = this.allData;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .u-drawer {
    /deep/ .u-drawer-content {
      border-radius: 40rpx 40rpx 0 0;
      padding-top: 40rpx;
      background: #fff;
    }
  }

  .popup {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .popup-hd {
    padding: 0 32rpx 32rpx;
    background: #fff;
  }

  .popup-bd {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .popup-title {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;

    .primary {
      color: #3989FC;
    }
  }

  .popup-ft {
    display: flex;
    padding: 0 32rpx 24rpx;

    .button {
      flex: 1;
      height: 96rpx;
      border-radius: 96rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: #3989FC;

      &+.button {
        margin-left: 24rpx;
        color: #fff;
        background: #D43030;
      }
    }
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 0;
    margin-bottom: -16rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .user-list {
    padding: 0 32rpx 24rpx;
  }

  .user-item {
    border-bottom: 1px solid #eee;
    padding: 24rpx 0;

    .u-checkbox {
      width: 100%;
    }
      
    /deep/ .u-checkbox__label {
      display: inline-flex;
      align-items: center;
      flex: 1;
      margin: 0 16rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }

    .tag {
      display: inline-block;
      border-radius: 40rpx;
      padding: 0 16rpx;
      margin-left: 24rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #fff;
      background: rgba(57, 137, 252, .3);
    }
  }
</style>